<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            width: 100px;
            height: 200px;
            background-color: blue;
        }
        li {
            width: 80px;
            height: 50px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>委托(delegate)：自己的事情交给别人做。子元素的事件交给父元素去处理，li---ul</p>
    <p>li很多时，挨个绑定事件会消耗性能；li动态生成时，绑定事件可能失效</p>
    <p>li的数量可以为0也可能很多，ul始终存在且唯一</p>
    <p>原理：事件冒泡。li的事件会冒泡到ul中</p>
    <!-- $(selector).delegate(childSelector,event,data,function) -->
    <ul class="ul1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        var ul = document.querySelector('.ul1');
        ul.onclick = function(e) {
            console.log(e);
        }
    </script>
</body>
</html>